import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import ReactHtmlParser from 'react-html-parser';
import { useHistory } from "react-router-dom";
import {
    colors,
    useMediaQuery,
    FormControl,
    OutlinedInput,
    InputAdornment,
    Button,
    Avatar,
    Typography,
    Grid,
    Divider,
} from '@material-ui/core';
import { Icon, Image } from 'components/atoms';
import { CardProduct, Section, SectionAlternate } from 'components/organisms';

import { useDispatch, useSelector } from 'react-redux'
import { setProductionItem } from 'redux/actions/PublicationActions'
import { callGetNewsApi } from 'utils/networking';

const useStyles = makeStyles(theme => ({
    pagePaddingTop: {
        padding: theme.spacing(3),
        paddingBottom: theme.spacing(3),
        [theme.breakpoints.up('md')]: {
            paddingTop: theme.spacing(5),
            paddingBottom: theme.spacing(5),
        },
    },
    sectionAlternate: {
        '& .section-alternate__content': {
            padding: theme.spacing(3),
            paddingBottom: theme.spacing(3),
            [theme.breakpoints.up('md')]: {
                paddingTop: theme.spacing(5),
                paddingBottom: theme.spacing(5),
            },
        },
    },
    searchInputContainer: {
        background: theme.palette.alternate.main,
        padding: theme.spacing(2),
        boxShadow: '0 4px 14px 0 rgba(0, 0, 0, 0.11)',
        borderRadius: theme.spacing(1),
        width: '100%',
        height: '100%',
        display: 'flex',
        alignItems: 'center',
        '& .MuiOutlinedInput-notchedOutline': {
            border: '0 !important',
        },
        '& .MuiInputAdornment-positionStart': {
            marginRight: theme.spacing(2),
        },
        '& .MuiOutlinedInput-adornedStart': {
            paddingLeft: 0,
        },
        '& .MuiOutlinedInput-input': {
            padding: 0,
        },
        [theme.breakpoints.down('sm')]: {
            padding: theme.spacing(1),
        },
    },
    searchButton: {
        maxHeight: 45,
        minWidth: 135,
        [theme.breakpoints.down('sm')]: {
            minWidth: 'auto',
        },
    },
    cardProduct: {
        display: 'flex',
        flexDirection: 'column',
        height: '100%',
        borderRadius: theme.spacing(1),
        '& .card-product__content': {
            paddingTop: theme.spacing(2),
            paddingBottom: theme.spacing(2),
        },
    },
    image: {
        objectFit: 'cover',
        borderRadius: theme.spacing(0, 0, 20, 0),
    },
    blogContent: {
        display: 'flex',
        flexDirection: 'column',
        height: '100%',
    },
    list: {
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    avatarContainer: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
    },
    avatar: {
        marginRight: theme.spacing(1),
    },
    divider: {
        margin: theme.spacing(2, 0),
    },
    button: {
        minWidth: '100%',
        maxWidth: '100%',
        [theme.breakpoints.up('sm')]: {
            minWidth: 420,
        },
    },
    answerCount: {
        padding: theme.spacing(1 / 2, 1),
        borderRadius: theme.spacing(1),
        background: theme.palette.secondary.light,
        color: 'white',
        fontWeight: 300,
    },
}));

const Result = props => {
    const { data, className, ...rest } = props;
    const classes = useStyles();
    const [newsList, setNewsList] = useState([]);
    const [searchKeyword, setSearchKeyword] = useState('');
    const [searchKey, setSearchKey] = useState('');

    useEffect(() => {
        getServerSideProps()
    }, [searchKey])

    const getServerSideProps = async () => {
        callGetNewsApi(`news/list?search_text=${searchKey}&limit=20&offset=0`, dispatch, (data) => {
            setNewsList(data.data);
        })
    }

    const loadMoreData = async () => {
        callGetNewsApi(`news/list?search_text=${searchKey}&limit=20&offset=${newsList.length}`, dispatch, (data) => {
            const newList = [...newsList, ...data.data];
            setNewsList(newList)
        })
    }

    const theme = useTheme();
    const isMd = useMediaQuery(theme.breakpoints.up('md'), {
        defaultMatches: true,
    });

    const dispatch = useDispatch()
    const history = useHistory();
    const moveDetailPage = (item) => {
        dispatch(setProductionItem(item));
        history.push(`publication/${item.id}`);
    }

    const searchBlogs = () => {
        setSearchKey(searchKeyword)
    }

    const BlogMediaContent = props => (
        <Image
            {...props}
            className={classes.image}
            lazyProps={{ width: '100%', height: '250px' }}
        />
    );

    const BlogContent = props => (
        <div className={classes.blogContent}>
            <Typography variant="h6" color="textPrimary" gutterBottom>
                {props.item.title}
            </Typography>
            <div color="textSecondary" lines={10} style={{ height: "150px", overflow: "hidden" }}>
                {ReactHtmlParser(props.item.content)}
            </div>
            <Typography variant="body1" color="primary" lines={10}>
                <a href="#" onClick={() => moveDetailPage(props.item)} style={{ marginTop: "10px" }}>Read More</a>
            </Typography>
            <div style={{ flexGrow: 1 }} />
            <Divider className={classes.divider} />
            <div className={classes.list}>
                <div className={classes.avatarContainer}>
                    <Avatar {...{ src: props.item.photo }} className={classes.avatar} />
                    <Typography variant="body2" color="textPrimary">
                        {props.item.author}
                    </Typography>
                </div>
                <Typography variant="overline" color="textSecondary">
                    {props.item.date}
                </Typography>
            </div>
        </div>
    );

    return (
        <div className={className} {...rest}>
            <Section className={classes.pagePaddingTop}>
                <div className={classes.searchInputContainer} data-aos="fade-up">
                    <FormControl fullWidth variant="outlined">
                        <OutlinedInput
                            onChange={event => setSearchKeyword(event.target.value)}
                            startAdornment={
                                <InputAdornment position="start">
                                    <Icon
                                        fontIconClass="fas fa-search"
                                        fontIconColor={colors.blueGrey[900]}
                                    />
                                </InputAdornment>
                            }
                            placeholder="Search for the blog"
                        />
                    </FormControl>
                    <Button
                        color="primary"
                        variant="contained"
                        size="large"
                        className={classes.searchButton}
                        onClick={searchBlogs}
                    >
                        Search
                    </Button>
                </div>
            </Section>
            <SectionAlternate className={classes.sectionAlternate}>
                <Grid container spacing={isMd ? 4 : 2}>
                    {/* <Grid item xs={12} container>
                        <Typography variant="body1" className={classes.answerCount}>
                            85 Result Found
                        </Typography>
                    </Grid> */}
                    {newsList.map((item, index) => (
                        <Grid item xs={12} sm={6} md={4} key={index} data-aos="fade-up">
                            <CardProduct
                                withShadow
                                liftUp
                                className={classes.cardProduct}
                                mediaContent={
                                    <BlogMediaContent {...{ src: item.thumbnail }} alt={item.title} />
                                }
                                cardContent={
                                    <BlogContent
                                        item={item}
                                    />
                                }
                            />
                        </Grid>
                    ))}
                    <Grid item xs={12} container justifyContent="center">
                        <Button
                            variant="contained"
                            color="primary"
                            size="large"
                            onClick={loadMoreData}
                            className={classes.button}
                        >
                            Load more
                        </Button>
                    </Grid>
                </Grid>
            </SectionAlternate>
        </div>
    );
};

Result.propTypes = {
    /**
     * External classes
     */
    className: PropTypes.string,
    /**
     * data to be rendered
     */
    data: PropTypes.array.isRequired,
};

export default Result;
